<extend name="Public/base"/>

<block name="body">
    <link rel="stylesheet" type="text/css" href="__CSS__/index.css">
    <link rel="stylesheet" type="text/css" href="__CSS__/upload.css">
    <script type="text/javascript" src="__STATIC__/uploadify/jquery.uploadify.min.js"></script>
    <style>
        .data-table table { width: 100%; border-collapse: collapse;}
        .spec-li{float: left; border: 1px solid #cdcdcd; min-width: 35px; height: 30px; line-height: 30px; margin-left: 5px; text-align: center; border-radius: 2px; }
        .spec-select{ border:1px solid red; color:red;}
        .img-plus{
            position: relative;
        }

        .img-remove{
            position: absolute;
            right: 0;
            width: 20px;
            height: 20px;
            background:url(__PUBLIC__/Admin/images/remove.png);
            background-size: 100% 100%;

        }
        .setheadimg{
            text-align: center;
            background-color: rgb(149, 133, 191);
            margin-top: 10px;
            border-radius: 5px;
            height: 20px;
            color: #fff;
        }
        li{
            /*float: left;*/
            margin-right: 10px; 
        }
        .upload-img-box .upload-pre-item{
            padding: 1px;
            width: 120px;
            height: 150px;
            overflow: hidden;
            text-align: center;
            cursor: pointer;
            border: 1px solid #ccc;
            transition: all .3s linear;
        }
        .up-img{
            height: 100px;
            width:100%
        }
    </style>
    <script type="text/javascript" src="__STATIC__/uploadify/jquery.uploadify.min.js"></script>
    <div class="main-title">
        <h2>{$meta_title}</h2>
    </div>
    <form action="" method="post" class="form-horizontal">
        <input type="hidden" name="id" id="id" value="{$id}">
        <div class="form-item">
            <label class="item-label">平台客服热线:<span class="check-tips"></span></label>
            <div class="controls">
                <input type="text" class="text input-large" name="tel" value="{$data['tel']}" placeholder="">
            </div>
        </div>
        <div class="form-item">
            <label class="item-label">二维码一</label><span class="check-tips">300*300px</span>
            <div class="controls">

                <div class="img-box full" style="width: 100%;">
                    <section class=" img-section">
                        <!--<p class="up-p">作品图片：<span class="up-span">最多可以上传5张图片，马上上传</span></p>-->
                        <div class="z_photo upimg-div clear" style="border:0;" >
                            <?php if(!empty($data['qcode1'])):?>
                            <section class="up-section fl">
                                <span class="up-span"></span>
                                <img src="__PUBLIC__/Admin/images/a7.png" class="close-upimg">
                                <img src="__ROOT__{$data['qcode1']}" class="up-img">
                                <p class="img-namep"></p>
                                <input id="taglocation" name="taglocation" value="" type="hidden">
                                <input id="tags" name="tags" value="" type="hidden">
                                <input type='hidden' name='qcode1' value="{$data['qcode1']}" class='img-item img-url js-pic_urlfile' >
                            </section>
                            <?php endif;?>
                            <section class="z_file fl" style="<?php if($data['qcode1']){echo "display: none;";}?>">

                                     <img src="__PUBLIC__/Admin/images/a11.png" class="add-img">

                                                                            <input type="file" name="file" id="qcode1" class="file" value="" accept="image/jpg,image/jpeg,image/png,image/bmp" multiple />
                                                                        </section>
                            </div>
                        </section>
                    </div>
                    <aside class="mask works-mask">
                        <div class="mask-content">
                            <p class="del-p">您确定要删除图片吗？</p>
                            <p class="check-p"><span class="del-com wsdel-ok">确定</span><span class="wsdel-no">取消</span></p>
                        </div>
                    </aside>
                </div>
                <label class="item-label">微信号一:<span class="check-tips"></span></label>
                <div class="controls">
                    <input type="text" class="text input-large" name="wx1" value="{$data['wx1']}" placeholder="">
                </div>
            </div>

            <div class="form-item">
                <label class="item-label">二维码二</label><span class="check-tips">300*300px</span>
                <div class="controls">

                    <div class="img-box full" style="width: 100%;">
                        <section class=" img-section">
                            <!--<p class="up-p">作品图片：<span class="up-span">最多可以上传5张图片，马上上传</span></p>-->
                            <div class="z_photo upimg-div clear"  style="border:0;" >
                                <?php if(!empty($data['qcode2'])):?>
                                <section class="up-section fl">
                                    <span class="up-span"></span>
                                    <img src="__PUBLIC__/Admin/images/a7.png" class="close-upimg">
                                    <img src="__ROOT__{$data['qcode2']}" class="up-img">
                                    <p class="img-namep"></p>
                                    <input id="taglocation" name="taglocation" value="" type="hidden">
                                    <input id="tags" name="tags" value="" type="hidden">
                                    <input type='hidden' name='qcode2' value="{$data['qcode2']}" class='img-item img-url js-pic_urlfile' >
                                </section>
                                <?php endif;?>
                                <section class="z_file fl" style="<?php if($data['qcode2']){echo "display: none;";}?>">

                                         <img src="__PUBLIC__/Admin/images/a11.png" class="add-img">

                                                                                <input type="file" name="file" id="qcode2" class="file" value="" accept="image/jpg,image/jpeg,image/png,image/bmp" multiple />
                                                                            </section>
                                </div>
                            </section>
                        </div>
                        <aside class="mask works-mask">
                            <div class="mask-content">
                                <p class="del-p">您确定要删除图片吗？</p>
                                <p class="check-p"><span class="del-com wsdel-ok">确定</span><span class="wsdel-no">取消</span></p>
                            </div>
                        </aside>
                    </div>
                    <label class="item-label">微信号二:<span class="check-tips"></span></label>
                    <div class="controls">
                        <input type="text" class="text input-large" name="wx2" value="{$data['wx2']}" placeholder="">
                    </div>
                </div>
                <div class="form-item">
                    <button class="btn submit-btn ajax-post" id="submit" type="submit" target-form="form-horizontal">确 定</button>
                    <button class="btn btn-return" onclick="javascript:history.back(-1);return false;">返 回</button>
                </div>
            </form>
        </block>

        <block name="script">
            <script type="text/javascript">
                //导航高亮
                highlight_subnav('{:U('Other / kefurexian')}');
            </script>
            <script type="text/javascript">
                $(function () {
                    var maxupload = 1;
                    var delParent;
                    var defaults = {
                        fileType: ["jpg", "png", "bmp", "jpeg"], // 上传文件的类型
                        fileSize: 1024 * 1024 * 5                  // 上传文件的大小 10M
                    };
                    /*点击图片的文本框*/
                    $(".file").change(function () {
                        var idFile = $(this).attr("id");
                        var file = document.getElementById(idFile);
                        var imgContainer = $(this).parents(".z_photo"); //存放图片的父亲元素
                        var fileList = file.files; //获取的图片文件

                        var input = $(this).parent(); //文本框的父亲元素
                        var imgArr = [];
                        //遍历得到的图片文件
                        var numUp = imgContainer.find(".up-section").length;
                        var totalNum = numUp + fileList.length; //总的数量
                        if (fileList.length > maxupload || totalNum > maxupload) {
                            alert("上传图片数目不可以超过" + maxupload + "个，请重新选择"); //一次选择上传超过5个 或者是已经上传和这次上传的到的总数也不可以超过5个
                        } else if (numUp < maxupload) {

                            fileList = validateUp(fileList);
                            for (var i = 0; i < fileList.length; i++) {
                                var filedata = fileList[i];
                                console.log(filedata);
                                var imgUrl = window.URL.createObjectURL(fileList[i]);
                                imgArr.push(imgUrl);
                                var $section = $("<section class='up-section fl loading'>");
                                imgContainer.prepend($section);
                                var $span = $("<span class='up-span'>");
                                $span.appendTo($section);
                                var $img0 = $("<img class='close-upimg'>").on("click", function (event) {
                                    event.preventDefault();
                                    event.stopPropagation();
                                    $(".works-mask").show();
                                    delParent = $(this).parent();
                                });
                                $img0.attr("src", "__PUBLIC__/Admin/images/a7.png").appendTo($section);
                                var $img = $("<img class='up-img up-opcity'>");
                                $img.attr("src", imgArr[i]);
                                $img.appendTo($section);
                                var formData = new FormData();
                                formData.append("download", filedata);
                                $.ajax({
                                    url: "{:U('File/uploadImage')}",
                                    type: "POST",
                                    data: formData,
                                    /**
                                     *必须false才会自动加上正确的Content-Type
                                     */
                                    contentType: false,
                                    /**
                                     * 必须false才会避开jQuery对 formdata 的默认处理
                                     * XMLHttpRequest会对 formdata 进行正确的处理
                                     */
                                    processData: false,
                                    success: function (data) {
                                        var $imginput = $("<input type='hidden' class='img-item' name='" + idFile + "'>");
                                        $imginput.val(data.path);
                                        $imginput.appendTo($section);
                                    },
                                    error: function () {
                                        alert("上传失败！");
                                        //                                $("#imgWait").hide();
                                    }
                                });
                                var $p = $("<p class='img-name-p'>");
                                $p.html(fileList[i].name).appendTo($section);
                                var $input = $("<input id='taglocation' name='taglocation' value='' type='hidden'>");
                                $input.appendTo($section);
                                var $input2 = $("<input id='tags' name='tags' value='' type='hidden'/>");
                                $input2.appendTo($section);
                            }
                        }
                        setTimeout(function () {
                            $(".up-section").removeClass("loading");
                            $(".up-img").removeClass("up-opcity");
                        }, 450);
                        numUp = imgContainer.find(".up-section").length;
                        if (numUp >= maxupload) {
                            $(this).parent().hide();
                        }

                        //input内容清空
                        $(this).val("");
                    });
                    $(".z_photo").delegate(".close-upimg", "click", function () {
                        $(".works-mask").show();
                        delParent = $(this).parent();
                    });
                    $(".wsdel-ok").click(function () {
                        $(".works-mask").hide();
                        var numUp = delParent.siblings().length;
                        if (numUp < maxupload + 1) {
                            delParent.parent().find(".z_file").show();
                        }
                        delParent.remove();
                    });
                    $(".wsdel-no").click(function () {
                        $(".works-mask").hide();
                    });
                    function validateUp(files) {
                        var arrFiles = []; //替换的文件数组
                        for (var i = 0, file; file = files[i]; i++) {
                            //获取文件上传的后缀名
                            var newStr = file.name.split("").reverse().join("");
                            if (newStr.split(".")[0] != null) {
                                var type = newStr.split(".")[0].split("").reverse().join("");
                                console.log(type + "===type===");
                                if (jQuery.inArray(type, defaults.fileType) > -1) {
                                    // 类型符合，可以上传
                                    if (file.size >= defaults.fileSize) {
                                        alert(file.size);
                                        alert('您这个"' + file.name + '"文件大小过大');
                                    } else {
                                        // 在这里需要判断当前所有文件中
                                        arrFiles.push(file);
                                    }
                                } else {
                                    alert('您这个"' + file.name + '"上传类型不符合');
                                }
                            } else {
                                alert('您这个"' + file.name + '"没有类型, 无法识别');
                            }
                        }
                        return arrFiles;
                    }

                });
            </script>
        </block>
